<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
	<link rel="stylesheet" href="/css/elementui/index.css">
	<link rel="stylesheet" href="/css/exam/css/style.css">
	<link rel="stylesheet" href="/iconfont/iconfont.css">
    <title>添加课程</title>
</head>

<body>
    {{ csrf_field() }}
    <!-- 添加课程 -->
    <div id="app">
 <div class="p-30">
	 <el-row>
	   <span class="icon iconfont icon-arrow_back"></span> <a href="{{route('admin.examview.course')}}">返  回</a> | 添加课程
	 </el-row><br>
            <el-form :model="formData" :rules="rules" ref="formData" label-width="270px" class="demo-ruleForm">
                <el-form-item label="名&ensp;&ensp;称" prop="videoName" style="width: 640px;">
                    <el-input v-model="formData.videoName"></el-input>
                </el-form-item>
                <el-form-item label="资源地址" prop="videoResources" style="width: 640px;">
				<div class="upload-content">
				        <el-upload
				            ref="uploadFile"
				            drag
				            action="/admin/upload/uploadAll?_token={{ csrf_token() }}"
				            :multiple="false"
				            :limit="1" 
				            accept=".jpg, .png, .ppt, .xlsx, .doc, docx, .xls"
				            :before-upload="beforeUpload"
							:on-preview="handlePreview"
				            :on-success="uploadSuccess"
				            :on-error="uploadError"
				            :on-exceed="uploadExceed">
				            <i class="el-icon-upload"></i>
				            <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
				            <div class="el-upload__tip" slot="tip">不超过10M，支持文件格式有.jpg, .png, .ppt, .doc, docx, .xls .xlsx</div>
				        </el-upload>
				    </div>
                    <!-- <el-input v-model="formData.videoResources"></el-input>-->
                </el-form-item>
                <el-form-item label="类&ensp;&ensp;型" prop="type">
                    <el-select v-model="formData.type" placeholder="类型"   style="width: 370px;">
                        <el-option v-for="(v,k,index) in formData.cidData" :key="index" :label="v" :value="k">
                        </el-option>
                    </el-select>
                    <el-form-item label="token" prop="_token" style="width: 640px;display:none">
                        <el-input v-model="formData._token"></el-input>
                    </el-form-item>
                </el-form-item>
            <el-button type="primary" @click="formValidate('formData')" style="margin-left: 270px;" v-debounce>保&ensp;&ensp;存</el-button>
            <!-- :loading="loading" -->
            <el-button @click="resetForm('formData')" style="margin-left: 40px;">重&ensp;&ensp;置</el-button>
            </el-form-item>
        </el-form>
      </div>
    </div>
</body>
<script src="/css/exam/js/vue.js"></script>
<script src="/css/elementui/index.js"></script>
<script src="/css/exam/js/axios.min.js"></script>
<script src="/css/exam/js/common.js"></script>
<script>
    new Vue({
        el: '#app',
        data: function() {
            return {
                formData: {
                    videoName: '',
                    videoResources: '',
                    type: '',
                    _token: '{{csrf_token()}}',
                    cidData: {},
                },
				isClick:true,
                rules: {
                    videoName: [{
                        required: true,
                        message: '名称不能为空',
                        trigger: 'blur',
                    }],
                    videoResources: [{
                        required: true,
                        message: '资源地址不能为空',
                        trigger: 'change',
                    }],
                    type: [{
                        required: true,
                        message: '请选择正确的分类',
                        trigger: 'change',
                    }],
                }
            }
        },
        created() {
            console.log('-------------->', '{{csrf_token()}}')
            this.getciddata()
        },
		watch: {
		'formData.videoResources': {
			handler (newVal) {
				if(newVal.length){
					this.$refs['formData'].clearValidate(['videoResources'])
				}
			},
			deep: true
		}
		},
	
        methods: {
            getciddata() {
                axios.post('/admin/video/status_all', {})
                    .then(res => {
                        this.formData.cidData = res.data.data
                        //  console.log('请求成功' + res);
                        console.log('请求成功' + res.data.data);
                    }).catch(error => {
                        console.log('请求失败：' + error);
                    })
            },
			
            formValidate(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
						if(this.isClick) {
							let videoName = this.formData.videoName;
							let videoResources = this.formData.videoResources;
							let type = this.formData.type;
							let _token = this.formData._token;
							console.log('this.formData.type' + type);
							axios.post('/admin/video/videosdo', {
									videoName: videoName,
									videoResources: videoResources,
									type: type,
									_token: _token,
								})
								.then(res => {
									
									console.log('this.formData.type' + this.formData.type);
									if (res.data.code == 200) {
										this.$message({
											type: 'success',
											message: '保存成功！'
										});
										// window.location=document.referrer;
										this.$refs[formName].resetFields();
									}  else if(res.data.code == 408){
										this.$message({
											type: 'info',
											message: '该名称已存在，请重新录入！'
										})
									} else{
										this.$message({
											type: 'info',
											message: '网络原因，请稍后再试'
										})
									}
								})
								this.isClick = false;
								setTimeout(function() {
									this.isClick = true;
								}, 3000);//3秒内不能重复点击
							}
                    } else {
                         console.log('error submit!!');
                         return false;
                    }
                });
            },
            resetForm(formName) {
                this.$refs[formName].resetFields();
            },
            goBack() {
                window.history.go(-1)
                console.log('go back');
            },
			beforeUpload(file) {
				const { name, size } = file;
				const index = name.lastIndexOf('.');
				// 判断文件名是否有后缀，没后缀文件错误
				if(index === -1) {
					this.$notify.error({
						title: '错误',
						message: '文件错误，请重新上传！',
					});
					return false;
				}
				const fileType = name.substr(index + 1);
				const acceptFileTypes = ['jpg', 'png', 'ppt','doc', 'docx', 'xls','xlsx'];
				// 判断文件类型
				if(!acceptFileTypes.includes(fileType)) {
					this.$notify.error({
						title: '错误',
						message: '文件类型错误，请重新上传！',
					});
					return false;
				}
				// 判断文件大小
				if(size > 10*1024*1024) {
					this.$notify.error({
						title: '错误',
						message: '文件大小超过10M，请重新上传！',
					});
					return false;
				}
				// 默认true
				return true;
			},
			uploadSuccess(res) {
				if(res.code === 200) {  // 文件上传成功
				console.log(res);
				this.formData.videoResources = res.data
				console.log(res.data);
					this.$notify.success({
						title:'成功',
						message: '文件上传成功！',
					});
				} else {
					this.uploadError();
				}
			},			 
			// 文件上传失败
			uploadError() {
				this.$notify.error({
					title: '错误',
					message: '文件上传失败！',
				});
			},
			// 文件个数超过限制
			uploadExceed() {
				this.$notify.warning({
					title:'提示',
					message: '您已添加了一个文件，如需替换，请先删除已添加的文件！',
				});
			},
			handlePreview(file) {
				console.log(file.response.data,'@@@@');
			},

					
			
			
        }
    })
</script>
<style scoped>
 a{color:#409EFF;text-decoration: none;}
 .el-page-header__content { font-size: 16px;}
</style>
</html>